<template>
  <div class="dialog" v-if='configure'>
    <div style="margin-top: 20px;">
      <el-form label-width="100px">
        <el-form-item label-width="76px" label="资源类型:" prop="projectname">
          <el-button size="small" v-for="(item,index) in types" :key="index" v-if="!editFlag||typeIndex==index"
            @click="typeIndex=index" :type="typeIndex==index?'primary':''" plain>{{item.name}}</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="wrap">
      <div class="wrap_title">
        <div>{{types[typeIndex].name}}</div>
      </div>
      <div v-show="typeIndex==0" style="padding: 20px 20px;width: 100%;">
        <el-form :model="form" :rules="rules" ref="form" label-width="100px">
          <el-form-item label="可用域:" v-if="form.availableDomain">
            <el-select v-model="form.availableDomain" placeholder="请选择" size="mini" style="width: 200px;">
              <el-option v-for="item in configure.available_domain" :key="item.dictValue" :label="item.dictLabel"
                :value="item.dictValue">
              </el-option>
            </el-select>
          </el-form-item>
       <!--   <el-form-item label="规格分类:">
            <div style="display: flex;padding-top: 8px;">
              <el-radio-group v-model="form.cloudFlavorCode" @change="cloudFlavorCodes">
                <el-radio v-for="(item,index) in configure.codeList"  :key="index" :label="item.specCode">
                  {{item.specName}}</el-radio>
              </el-radio-group>
            </div>
          </el-form-item> -->
          <el-form-item label="规格:">
            <el-select v-model="form.Specifications" placeholder="请选择规格" size="mini" @change="ChangeSpecifications" style="width: 200px;">
                <el-option v-for="item in configure.SpecificationsList"
                    :key="item.specName"
                    :label="item.specName"
                    :value="item.specName">
                </el-option>
            </el-select>
            <!-- <div v-for="(item,index) in configure.codeList" :key="index" v-if="form.cloudFlavorCode==item.specCode">
              {{item.desc}}
            </div> -->
          <!--  <div style="display: flex;">
              <span style="margin:0 10px">CPU</span>
              <div style="height: 35px;">
                <Slider style="width: 400px;" :step="2" :min='1' :max='40' v-model="form.cpuNumber" show-input></Slider>
              </div>
              <span style="margin:0 5px">核</span>
            </div>
            <div style="display: flex;">
              <span style="margin:0 10px">内存</span>
              <div style="height: 35px;">
                <Slider style="width: 400px;" :step="2" :min='1' :max='64' v-model="form.memorySize" show-input></Slider>
              </div>
              <span style="margin:0 5px">GB</span>
            </div> -->

          </el-form-item>

          <el-form-item label="系统盘:" v-if="form.osDisk">
            <div style="display: flex;">
              <el-select v-model="form.osDisk.diskServerCode" placeholder="请选择" size="mini" style="width: 200px;">
                <el-option v-for="item in configure.storage_type" :key="item.code"
                  :label="item.serviceName ?item.serviceName : item.dictLabel " :value="item.code">
                </el-option>
              </el-select>
              <el-select v-model="form.osDisk.dataDiskSize" placeholder="请选择" size="mini"
                style="width: 200px;margin: 0 10px;">
                <el-option v-for="item in [160,100]" :key="item" :label="item" :value="item">
                </el-option>
              </el-select>GB
            </div>
          </el-form-item>
          {{form.osType}}
          <el-form-item label="操作系统:" prop="osType">
              <el-select style="width: 200px;" v-model="form.osType" @change="(e)=>{ cascaderChange(e,'form')}" placeholder="请选择操作系统" size="mini">
                  <el-option
                      v-for="item in configure.czxtList"
                      :key="item.serviceNumber"
                      :label="item.serviceName"
                      :value="item.serviceNumber">
                  </el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="操作系统版本:" prop="osServerCode">
              <!-- 请选择操作系统版本 -->
              <el-select
                  v-model="form.osServerCode"
                  placeholder="请选择操作系统版本"
                  size="mini"
                  style="width: 200px;"
                  @change="(e)=>{ ChangeCzxtVersion(e,'form')}"
              >
                  <el-option
                      v-for="item in CzxtVersion"
                      :key="item.code"
                      :label="item.serviceName"
                      :value="item.code"
                  >
                  </el-option>
              </el-select>
          </el-form-item>
        <!--  <el-form-item label="操作系统:">
            <el-cascader size="mini" style="width: 500px;" v-model="form.osServerCode" :options="configure.czxtList"
              @change="cascaderChange(configure.czxtList,'form')" :props="{value:'code',label:'serviceName'}">
            </el-cascader>
          </el-form-item> -->
          <el-form-item label="数据盘:" v-if="form.disks">
            <div>
              <span>你已选择<span style="color: #E83112;">{{form.disks.length}}</span>块，还可以选择<span
                  style="color: #E83112;">{{16-form.disks.length}}</span>块</span>
              <div v-for="(item,index) in form.disks" :key="index"
                style="margin-top: 10px;display: flex;line-height: 28px;">
                <a @click="form.disks.splice(index,1)"><i class="el-icon-remove"></i></a>
                <el-select v-model="item.diskServerCode" placeholder="请选择" size="mini" style="width: 160px;">
                  <el-option v-for="it in configure.ccList" :key="it.code" :label="it.serviceName" :value="it.code">
                  </el-option>
                </el-select>
                <el-input size="mini" maxlength='7' style="width: 150px;margin-left:20px" @blur="inputNumber($event)" v-model="item.dataDiskSize"></el-input>GB
              </div>
              <div style="margin: 10px 0;display: flex;line-height: 28px;">
                <a v-show="form.disks.length<16"
                  @click="form.disks.push({diskServerCode:configure.ccList[0].code,dataDiskSize:'500'})">
                  <i class="el-icon-circle-plus" style="color: #3a8dfd;"></i>
                </a>
                <span v-show="form.disks.length<16">增加一块数据盘</span>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="主机别名:" prop="instanceName">
            <el-input style="width: 200px;" placeholder="请输入" v-model="form.instanceName">
            </el-input>
          </el-form-item>
          <el-form-item v-if="!editFlag" label="数量(1~50):" prop="instanceNum">
            <el-input @input="InputUnstanceNum" style="width: 200px;" size="mini" type="number" min="1" max="50" placeholder="请输入申请的服务器数量"
              v-model="form.instanceNum">
            </el-input>
          </el-form-item>
        </el-form>
      </div>


      <div v-show="typeIndex==1" style="padding: 20px 20px;width: 100%;">
        <el-form :model="ljsform" :rules="ljsrules" ref="ljsform" label-width="100px">
          <el-form-item label="可用域:">
            <el-select v-model="ljsform.availableDomain" placeholder="请选择" size="mini" style="width: 200px;">
              <el-option v-for="item in configure.available_domain" :key="item.dictValue" :label="item.dictLabel"
                :value="item.dictValue">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="资源类型:">
            <div style="display: flex;padding-top: 8px;">
              <el-radio-group v-model="ljsform.cloudFlavorCode">
                <el-radio style="margin-bottom: 10px;" v-for="(item,index) in configure.wlfwqList" :key="index"
                  :label="item.code">{{item.serviceName}}</el-radio>
              </el-radio-group>
            </div>
          </el-form-item>
          <el-form-item label="规格:" prop="projectname" style="margin-top: -10px;">
            <span v-for="(item,index) in configure.wlfwqList" :key="index"
              v-if="ljsform.cloudFlavorCode==item.code">{{item.remark}}</span>
          </el-form-item>
          <el-form-item label="操作系统:">
            <el-cascader size="mini" style="width: 500px;" v-model="ljsform.osServerCode" :options="configure.czxtList"
              @change="cascaderChange(configure.czxtList,'ljsform')" :props="{value:'code',label:'serviceName'}">
            </el-cascader>
          </el-form-item>
          <el-form-item label="主机别名:" prop="instanceName">
            <el-input style="width: 200px;" placeholder="请输入" v-model="ljsform.instanceName">
            </el-input>
          </el-form-item>
          <el-form-item v-if="!editFlag" label="数量(1~50):" prop="instanceNum">
            <el-input @input="InputljsformUnstanceNum" style="width: 200px;" size="mini" type="number" min="1" max="50" placeholder="请输入申请的服务器数量"
              v-model="ljsform.instanceNum">
            </el-input>
          </el-form-item>
        </el-form>
      </div>


      <div v-show="typeIndex==2" style="padding: 20px 20px;width: 100%;">
        <el-form :model="sjkform" :rules="sjkrules" ref="sjkform" label-width="100px">
          <el-form-item label="类型:">
            <el-radio-group v-model="sjkform.serverCode">
              <el-radio v-for="(item,index) in configure.sjkList" :key="index" :label="item.code">{{item.serviceName}}
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="版本:">
            <el-radio-group v-model="sjkform.databaseVersion">
              <el-radio label="SQL Server 2019">SQL Server 2019</el-radio>
              <el-radio label="SQL Server 2017">SQL Server 2017</el-radio>
              <el-radio label="SQL Server 2016">SQL Server 2016</el-radio>
              <el-radio label="SQL Server BI">SQL Server BI</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="位数:">
            <el-radio-group v-model="sjkform.systemDigits">
              <el-radio label="32位">32位</el-radio>
              <el-radio label="64位">64位</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="服务器:" prop="hostId">
            <el-select v-model="sjkform.hostId" placeholder="请选择" size="mini" style="width: 200px;">
              <el-option v-for="item in hosts" :key="item.id" :label="EchoName(item)" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>


      <div v-show="typeIndex==3" style="padding: 20px 20px;width: 100%;">
        <el-form :model="cpform" :rules="cprules" ref="cpform" label-width="100px">
          <el-form-item label="存储类型:">
            <el-radio-group v-model="cpform.productCode" @change="productCodeChange">
              <el-radio label="共享型">共享型</el-radio>
              <el-radio label="服务型">服务型</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="服务类型:">
            <el-radio-group v-model="cpform.diskCode">
              <el-radio :label="cpform.productCode=='共享型'?'共享存储':'视频云存储'">{{cpform.productCode=='共享型'?'共享存储':'视频云存储'}}
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="磁盘:">
            <div style="display: flex;">
              <el-select v-model="cpform.diskServerCode" placeholder="请选择" size="mini" style="width: 200px;">
                <el-option v-for="item in  cpform.productCode=='共享型'?configure.ccList:configure.fwcpList"
                  :key="item.code" :label="item.serviceName" :value="item.code">
                </el-option>
              </el-select>
              <el-input size="mini" maxlength='7' style="width: 150px;margin-left:20px" v-model="cpform.dataDiskSize"></el-input>GB
            </div>
          </el-form-item>
          <el-form-item label="服务器:" prop="hostIds" v-if="cpform.productCode=='共享型'">
            <el-select v-model="cpform.hostIds" multiple clearable placeholder="请选择" size="mini" style="width: 410px;">
              <el-option v-for="item in hosts" :key="item.id" :label="EchoName(item)" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div
          v-show="typeIndex == 4"
          style="padding: 20px 20px; width: 100%"
      >
          <div class="wrap_title">
              <!-- <div>安全产品</div> -->
          </div>
          <div style="padding: 20px 20px">
              <div
                  class="wrap_item"
                  style="margin-top: 0; display: block"
              >
                  <el-checkbox
                      :indeterminate="isIndeterminate"
                      v-model="checkAll"
                      @change="handleCheckAllChange"
                      >全选
                  </el-checkbox>
                  <div style="margin: 15px 0"></div>
                  <el-checkbox-group
                      v-model="aqform"
                      @change="handleCheckedChange"
                  >
                      <el-checkbox
                          v-for="item in configure.yyaqList"
                          :label="item.code"
                          :key="item.code"
                          >{{ item.serviceName }}
                      </el-checkbox>
                  </el-checkbox-group>
              </div>
          </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    specDetail,
    serviceByClazz
  } from "@/api/resources/apply";
  import {
    v4 as uuidv4
  } from 'uuid';
  export default {
    name: "addBdialog",
    components: {},
    props: {
      configure: {
        type: Object,
        default: {
          available_domain: [], //可用域
          cloud_service_provider: [], //服务商
          storage_type: [], //系统盘类型
          codeList: [], //云服务器规格列表
          czxtList: [], //操作系统列表
          ccList: [], //数据盘类型
          fwcpList: [], //服务型磁盘类型
          wlfwqList: [], //高性能服务器资源类型
          sjkList: [], //数据库类型
        }
      },
      hosts: {
        type: Array,
        default: []
      },
      addShow: {
        type: String,
        default: ''
      },
    },
    data() {
      return {
        isIndeterminate: false,
        yyaqList: null,
        checkAll: false,
        //是否是修改
        editFlag: false,
        //资源类型
        types: [{
            name: '云服务器',
            code: 'yzj'
          },
          {
            name: '高性能服务器',
            code: 'wlfwq'
          },
          {
            name: '数据库',
            code: 'sjk'
          },
          {
            name: '存储产品',
            code: 'cc'
          },
          {
              name: "安全产品",
              code: "aq",
          },
        ],
        typeIndex: 0,
        //云服务器数据
        form: {
          flavorType: 1, //主机类型 1 虚拟化主机 2 高性能物理机
          availableDomain: '', //可用域
          cloudFlavorCode: '', //规格分类

          cpuNumber: '', //CPU核数
          memorySize : '',//内存条容量

          osDisk: {
            diskServerCode: '',
            dataDiskSize: ''
          }, //系统盘


          osServerCode: '', //操作系统code
          osName: '', //操作系统名称

          disks: [], //数据盘列表
          instanceName: '云服务器', //主机名称
          instanceNum: 1, //数量
        },
        //高性能服务器数据
        ljsform: {
          flavorType: 2, //主机类型 1 虚拟化主机 2 高性能物理机
          availableDomain: '', //可用域
          cloudFlavorCode: '', //资源类型

          osServerCode: '', //操作系统code
          osName: '', //操作系统名称
          disks: [], //数据盘列表
          instanceName: '高性能服务器', //主机名称
          instanceNum: 1, //数量
        },
        //数据库数据
        sjkform: {
          serverCode: '', //数据库类型
          databaseVersion: 'SQL Server 2019', //数据库版本
          systemDigits: '32位', //位数
          hostId: '', //服务器
        },
        //存储产品数据
        cpform: {
          productCode: '共享型', //存储类型
          diskCode: '共享存储', //服务类型
          diskServerCode: '', //磁盘类型
          dataDiskSize: 500, //磁盘大小
          hostIds: [] //服务器
        },
        aqform: [],
        rules: {
          instanceName: [{
            required: true,
            message: '请输入主机别名',
            trigger: 'blur'
          }, ],
          instanceNum: [{
            required: true,
            message: '请输入申请的服务器数量',
            trigger: 'blur'
          }, ],
        },

        ljsrules: {
          instanceName: [{
            required: true,
            message: '请输入主机别名',
            trigger: 'blur'
          }, ],
          instanceNum: [{
            required: true,
            message: '请输入申请的服务器数量',
            trigger: 'blur'
          }, ],
        },
        sjkrules: {
          hostId: [{
            required: true,
            message: '请选择服务器',
            trigger: 'change'
          }, ],
        },
        cprules: {
          hostIds: [{
            required: true,
            message: '请选择服务器',
            trigger: 'change'
          }, ],
        },



        radio: "1",

        radio1: "1",
        options: ['分布式存储', '1', '2', '3', '4', '5'],
        selectValue: '',

        options2: [{
          value: 'win',
          label: 'windows',
          children: [{
            value: 'win7',
            label: 'win7'
          }, {
            value: 'win10',
            label: 'win10'
          }]
        }],
        value: '',
        shujupan: [],
        hulianwang: [],
        wangkapeizhi: [],
        duankou: [],
        checked1: false,
        checked2: false,
        checked3: false,
        CzxtVersion:[],
        demoList: [{
          a: '浪潮云',
          j: '云服务器',
          b: 4,
          c: 8,
          d: 8,
          e: 128,
          f: '分布式存储',
          g: `windows/win10`,
          h: ['分布式存储，4GB，数量：2', '分布式存储，8GB，数量：3'],
          i: 1
        }]
      };
    },
    created() {

    },
    methods: {
		inputNumber(e){
		 let boolean = new RegExp("^[1-9][0-9]*$").test(e.target.value)
		 if(!boolean){
		   this.$message.warning("请输入正整数")
		   e.target.value=''
		 }
		},
      //获取操作系统名称
      cascaderChange(data,name) {
        console.log( this[name])
          if(name){
              this[name].osServerCode = ''
              this[name].osName = ''
              this[name].osType = data
          }
          //target
        console.log("serviceByClazz1"+data)
          serviceByClazz({ code: data,supplier:this.form.supplierCode }).then(res=>{
              this.CzxtVersion = res.data
          })
      },
      // 选择指定操作系统
      ChangeCzxtVersion(val,name){
        console.log(val,name,'wewe')
          this.CzxtVersion.forEach(item=>{
              if(item.code == val){
                  this[name].osServerCode = item.code
                  this[name].osName = item.serviceName
              }
          })
      },
      // 云服务器规格选择
      ChangeSpecifications(val){
          this.configure.SpecificationsList.forEach(item=>{
          if(item.specName == val){
              this.form.Specifications = val
              this.form.cpuNumber = item.cpuNumber
              this.form.memorySize = item.memorySize
              this.form.memoryServerCode = item.memoryCode;
          }
          })
          this.$forceUpdate();
      },
      InputUnstanceNum(val){
        if(val > 50){
          this.form.instanceNum = 50
        }else{
          this.form.instanceNum = val
        }
      },
      InputljsformUnstanceNum(val){
        if(val > 50){
          this.ljsform.instanceNum = 50
        }else{
          this.ljsform.instanceNum = val
        }
      },
      cloudFlavorCodes(val){
        this.configure.codeList.some((item) => {
            if (val == item.specCode) {
                item.details.forEach((it) => {
                    if (it.serviceCode == "vcpu") {
                        this.form.cpuNumber = it.serviceCount;
                        this.form.cpuServerCode = it.serviceCode;
                    }
                    if (it.serviceCode == "memory") {
                        this.form.memorySize = it.serviceCount;
                        this.form.memoryServerCode = it.serviceCode;
                    }
                });
                return;
            }
        });
      },
      handleCheckAllChange(val) {
          if (!this.yyaqList) {
              this.yyaqList = this.configure.yyaqList.map((item) => {
                  return item.code;
              });
          }
          this.aqform = val ? this.yyaqList : [];
          this.isIndeterminate = false;
      },
      handleCheckedChange(value) {
          let checkedCount = value.length;
          this.checkAll = checkedCount === this.configure.yyaqList.length;
          this.isIndeterminate =
              checkedCount > 0 &&
              checkedCount < this.configure.yyaqList.length;
      },
      // 回显服务器名称
      EchoName(item) {
        if (item.hostName) {
          if (item.existOnRep == true) {
            return item.hostName + '（已存在）'
          } else {
            return item.hostName
          }
        } else {
          if (item.existOnRep == true) {
            return item.instanceName + '（已存在）'
          } else {
            return item.instanceName
          }
        }
      },
      //提交
      submit() {
        let formName = this.typeIndex == 0 ? 'form' : this.typeIndex == 1 ? 'ljsform' : this.typeIndex == 2 ?
          'sjkform' : 'cpform';
        if(this.typeIndex == 4){
          this.$emit(
              "addTable",
              JSON.parse(JSON.stringify(this.aqform))
          );
          return
        }
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if ( this.addShow == 1 && (this.typeIndex==0 || this.typeIndex == 1)) {
              this[formName].id = uuidv4()
            }
            if (this.typeIndex == 4) {
                this.$emit(
                    "addTable",
                    JSON.parse(JSON.stringify(this.aqform))
                );
            } else {
                this.$emit(
                      "addTable",
                      JSON.parse(JSON.stringify(this[formName]))
                  );
            }
          } else {
            return false;
          }
        });
      },
      //存储类型变化
      productCodeChange(e) {
        if (e == '共享型') {
          this.cpform.diskServerCode = this.configure.ccList[0].code
          this.cpform.diskCode = '共享存储'
        } else {
          this.cpform.diskServerCode = this.configure.fwcpList[0].code
          this.cpform.diskCode = '视频云存储'
        }
      },
      //初始化
      init(data) {
        this.$refs.form.resetFields()
        this.$refs.ljsform.resetFields()
        this.$refs.sjkform.resetFields()
        this.$refs.cpform.resetFields()
        this.editFlag = false
        if (data) {
          this.editFlag = true
          if (data.flavorType && data.flavorType == 1) {
            this.typeIndex = 0
            this.form = data
          } else if (data.flavorType && data.flavorType == 2) {
            this.typeIndex = 1
            this.ljsform = data
          } else if (data.serverCode) {
            this.typeIndex = 2
            this.sjkform = data
          } else if (data.diskServerCode) {
            this.typeIndex = 3
            this.cpform = data
            if(!data.hostIds||!data.hostIds.length){
              if(data.hosts&&data.hosts.length){
                this.cpform.hostIds = []
                data.hosts.forEach(i => {
                  this.cpform.hostIds.push(i.id)
                })
              }
            }
          }
        } else {
          this.form.availableDomain = this.configure.available_domain[0].dictValue
          this.form.cloudFlavorCode = this.configure.codeList[0].specCode
          this.cloudFlavorCodes(this.configure.codeList[0].specCode)
          this.form.osDisk = {
            diskServerCode: this.configure.storage_type[0].code,
            dataDiskSize: 160
          }
          this.form.osServerCode = this.configure.czxtList[0].code

          this.ljsform.availableDomain = this.configure.available_domain[0].dictValue
          this.ljsform.cloudFlavorCode = this.configure.wlfwqList[0].code
          this.ljsform.osServerCode = [this.configure.czxtList[0].code]

          this.sjkform.serverCode = this.configure.sjkList[0].code
          if (this.hosts.length) {
            this.sjkform.hostInstanceName = this.hosts[0].hostName
          }

          this.cpform.diskServerCode = this.configure.ccList[0].code

        }
          console.log(this.form,'232323')
        // this.cascaderChange(this.configure.czxtList, 'form')
        // this.cascaderChange(this.configure.czxtList, 'ljsform')

      }
    }
  };
</script>
<style>
  .el-form-item--medium .el-form-item__label {
    text-align: left !important;
  }
</style>
<style scoped lang="less">
  .dialog {
    // max-height: calc(75vh - 160px);
    padding-right: 20px;

    // overflow-y: scroll;
    .title {
      text-align: left;
      margin-bottom: 20px;
      font-size: 16px;
      font-weight: bold;
      padding-left: 4px;
      border-left: 4px solid #38b3aa;
    }

    i {
      line-height: 28px;
      margin-right: 10px;
      font-size: 20px;
      color: #E83112;
    }

    .wrap {
      display: flex;
      background: #faf9ff;
      margin-top: 20px;
      border-radius: 10px;

      .wrap_title {
        padding: 0 10px;
        background: #f4f4f4;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;

        div {
          height: 100%;
          width: 14px;
          font-weight: bold;
          display: flex;
          flex-direction: column;
          justify-content: center;
        }
      }

      .wrap_item {
        display: flex;
        margin-top: 20px;

        div:first-child {
          width: 90px;
          font-weight: bold;
        }


      }
    }



    .msg {
      padding: 0 20px 20px 0px;
      background: #faf9ff;
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 30px;
      border-radius: 10px;

      .wra2p {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
      }

      .item {
        margin-left: 20px;
        width: calc(33.33% - 20px);
        min-width: 340px;
        display: flex;
      }
    }
  }
</style>
